
<template>
  <el-form-item
    :key="element.metaRefresh"
    :prop="itemProp"
    :label="element.options.label"
    :rules="element.options.rules"
  >
    <el-select
      clearable
      v-model="element.options.value"
      class="m-2"
      placeholder="Select"
      size="large"
      @change="selectChange"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
</template>
 
<script lang="ts">
import {
  defineComponent,
  inject,
  toRefs,
  watch,
  reactive,
  computed,
} from "vue";
import type { LowCodeImp } from "@/components/low-code/core/type";
export default defineComponent({
  name: "selectWidget",
  props: ["element"],
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const { element } = toRefs(props);
    const options = [
      {
        value: "Option1",
        label: "Option1",
      },
      {
        value: "Option2",
        label: "Option2",
      },
      {
        value: "Option3",
        label: "Option3",
      },
      {
        value: "Option4",
        label: "Option4",
      },
      {
        value: "Option5",
        label: "Option5",
      },
    ];

    const selectChange = () => {
      element.value.options.onChangeEvents.map(async (code: any) => {
        await lowCode.eventCenterController.fire(code);
      });
    };

    const itemProp = computed(() => {
      if (element.value.model && element.value.model.length > 0) {
        return element.value.model[element.value.model.length - 1];
      }
      return "";
    });

    return {
      element,
      itemProp,
      options,
      selectChange,
    };
  },
});
</script>

<style  scoped>
.el-select {
  width: 100%;
}
</style>
